/**
 * Created by gengrong on 16/5/4.
 */
import { Panel, ImgHolder } from 'comps/common';
import { Form, Row, Col } from 'antd';
import * as React from 'react';

class UserProfileForm extends React.Component {

  render() {
    const { user } = this.props;

    if (user.email === undefined) {
      user.email = '?';
    }

    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };

    const firstName = user.email.substr(0, 1);

    return (
      <div>
        <Panel title='基本信息'>
          <Form className='user-info-form' horizontal>
            <Row>
              <Col span='16'>
                <Form.Item {...layout} label='Email：'>
                  <p>{user.email}</p>
                </Form.Item>
                <Form.Item {...layout} label='昵称：'>
                  <p>{user.nick}</p>
                </Form.Item>
                <Form.Item {...layout} label='手机号码：'>
                  <p>{user.mobile}</p>
                </Form.Item>
              </Col>
              <Col span='8'>
                <div className='userAvatar'>
                  <ImgHolder className='avatarImg' src={user.avatar} rect='160x160' text={firstName}/>
                </div>
              </Col>
            </Row>
          </Form>
        </Panel>
      </div>
    );
  }
}

export default UserProfileForm;
